<template>
	<div>
		<div class="overlay nav-btm">
			<div class="overlay-content scrolling">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="item,index of list" :key="index"><img :src="item.img" alt=""></div>
					</div>
					<div class="swiper-pagination"></div>
				</div>

				<van-row class="box" type="flex" justify="center">
					<van-col span="8" @click.native="$router.push({path: '/ToChange'})">
						<img src="./../assets/images/h1.png" alt="">
						<p>充币</p>
					</van-col>
					<van-col span="8" @click.native="OutChange()">
						<img src="./../assets/images/h2.png" alt="">
						<p>提币</p>
					</van-col>
					<!-- <van-col span="6" @click.native="$router.push({path: '/Assets'})">
						<img src="./../assets/images/h3.png" alt="">
						<p>资产</p>
					</van-col> -->
					<van-col span="8" @click.native="service()">
						<img src="./../assets/images/h4.png" alt="">
						<p>客服</p>
					</van-col>
				</van-row>

				<div class="scrollDiv">
					<swiper auto loop height="40px" direction="vertical" :interval='3000' class="text-scroll" :show-dots="false">
						<swiper-item v-for="item,index of list2" :key='index'>
							<p class="scrollDivP" @click="toNewsDetails(item.id)">{{item.title}}</p>
						</swiper-item>
					</swiper>
					<router-link tag="a" class="more1 gold" to="/NewsList">
						<van-icon name="arrow" />
					</router-link>
				</div>

				<div class="ranking">涨幅榜</div>
				<div class="weui-cells ranking_list">
					<!-- <div class="weui-cell" v-for="item,index of coinTypesList" :key="index" @click="$router.push({path: '/KLine',query:{marketId:index+1}})"> -->
					<div class="weui-cell" v-for="item,index of coinTypesList" :key="index">
						<div class="weui-cell__hd">
							<i v-show="index == 0" class="One">1</i>
							<i v-show="index == 1" class="two">2</i>
							<i v-show="index == 2" class="three">3</i>
							<i v-show="index == 3" >4</i>
							<i v-show="index == 4" >5</i>
							<i v-show="index == 5" >6</i>
						</div>
						<div class="weui-cell__bd">
							<div v-show="index == 0">AIDT / <span>QC</span></div>
							<div v-show="index == 1">BTC / <span>USDT</span></div>
							<div v-show="index == 2">ETH / <span>USDT</span></div>
							<div v-show="index == 3">EOS / <span>USDT</span></div>
							<div v-show="index == 4">LTC / <span>USDT</span></div>
							<div v-show="index == 5">XRP / <span>USDT</span></div>
							<P class="today">今日量 {{item.baseVolume}}万</P>
						</div>
						<div class="weui-cell__bd">
							<div>{{item.last}}</div>
							<p class="price">¥{{item.cny}}</p>
						</div>
						<div class="gain">
							<span class="rise" v-show="item.percentChange >= 0">+{{item.percentChange}}%</span>
							<span class="fall" v-show="item.percentChange < 0">{{item.percentChange}}%</span>	
						</div>
					</div>
					
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast, Dialog, Notify} from 'vant';
	import { home, safety, mine } from './../utils/api';
	import {Swiper, SwiperItem, Actionsheet, base64 } from 'vux';
	import { encryptDes, decryptDes } from './../utils/des'
	import Swiper2 from 'swiper';
	import 'swiper/dist/css/swiper.min.css';
	let _this;
	export default {
		data() {
			return {
				list: [],
				list2: '',
				speed: 30,
				coinTypes: ['btc_AIDT','eth_AIDT','eos_AIDT','ltc_AIDT','xrp_AIDT'],
				coinTypesList:[],
				timer:null,
				Customer:''
			}
		},
		components: {
			Swiper,
			SwiperItem,
			Actionsheet
		},
		beforeCreate() {
			_this = this;
		},
		created() {
			// 页面不需要登录就能访问切页面上有请求接口，登录和不登录的时候。需要添加此代码
			if(sessionStorage.token) {
				this.axios.defaults.headers['Authorization'] = 'bearer ' + sessionStorage.token;
			}
			this.getList(); // 获取首页轮播图
		},
		mounted() {
			this.ticker();
			this.timer = setInterval(function(){
				_this.ticker();
			}, 5000);
		},
		methods: {
			toNewsDetails(id) { //公告
				this.$router.push({
					name: 'NewsDetails2',
					query: {
						id: id
					}
				})
			},
			getList() {
				home.getBanner().then(res => {
					if(res.code == 200) {
						const baseList = [];
						for(let i = 0; i < res.data.value.split(";").length; i++) {
							baseList.push({
								img: res.data.value.split(";")[i]
							})
						}
						this.list = baseList;
					}
				})
				home.getNoticesNewest().then(res => {
					if(res.code == 200) {
						this.list2 = res.data;
					}
				})
			},
			OutChange(){
				if(sessionStorage.Account){
					this.$PayPwd('/OutChange','/')
				}else{
					this.$router.push({
						path: '/OutChange'
					})
				}
			},
			ticker() { //涨幅榜
				let param = this.qs.stringify({
					'coinTypes':this.coinTypes
				}, {
					// arrayFormat: 'indices',
					// allowDots: true,
					indices: false
				})
				this.axios
				.post(process.env.API_HOST + "indexs/ticker",param)
				.then(res => {
				if (res.data.code == 200) {
					this.coinTypesList = res.data.data;
				}
				});
			},
			service() {  //客服弹窗
			home.getCustomer().then(res => {
				if(res.code == 200) {
					this.Customer = res.data.split("|").join("<br/>").replace(/\s*/g,"");
					Dialog.alert({
						title: '联系客服',
						messageAlign:'left',
						message: this.Customer,
						}).then(() => {
						// on close
					});
				}
			})
			
			}
		},
		updated () {
			

		},
		destroyed(){
			clearInterval(this.timer);
		},
		watch:{
			list:function(){
				_this.$nextTick(function () {
					var swiper = new Swiper2('.swiper-container', {
						effect: 'coverflow',
						grabCursor: true,
						centeredSlides: true,
						slidesPerView: 'auto',
						loop:true,
						//自动播放
						autoplay: {
							delay: 3000
						},
						coverflowEffect: {
							rotate: 40,
							stretch: 0,
							depth: 100,
							modifier: 1,
							slideShadows : true,
						},
						pagination: {
							el: '.swiper-pagination',
						}
					});
				});
			}
		}
	}
</script>

<style lang="less" scoped>
.scrollDiv 	p{overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;}
	.head~.overlay {
		top: 45px;
		background: #1a2e58;
	}
	
	.van-notice-bar {
		height: 30px;
	}
	
	.scrollDiv {
		height: 25px;
		line-height: 25px;
		overflow: hidden;
		position: relative;
		background: url(../assets/images/gd.png) no-repeat 10px center;
		background-size: 20px;
		padding: 4px 50px 4px 40px;
		margin: 0 10px;
		border-radius: 2px;
		margin-bottom: 10px;
	}
	
	.scrollDiv .more1 {
		position: absolute;
		right: 10px;
		top: 6px;
		color: #FFFFFF;
	}
	
	.scrollDiv p {
		font-size: 13px;
	}
	
	.img {
		width: 100%;
		border-radius: 5px;
	}
	.swiper-container {
      width: 100%;
	  
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
	  img{
		  width:100%;
		  border-radius: 6px;
	  }
	}
	/deep/.swiper-pagination-bullet-active{
		background: #00dd94;
	}
	.box{
		padding:20px 0;
		text-align: center;
		font-size: 13px;
		img{
			width: 26px;
			height: 26px;
			padding-bottom:2px;
		}
	}
	.ranking{
		background:#282d41;
		padding:4px 10px;
		font-size: 14px;
	}
	/deep/.weui-cell:before{
		border-top: 0;
	}
	.ranking_list{
		i{
			display: inline-block;
			width: 26px;
			height: 26px;
			line-height: 26px;
			text-align: center;
			background:url(./../assets/images/z4.png) no-repeat;
			background-size: 26px;
			font-size: 12px;
			padding-right:10px;
		}
		i.One{
			background:url(./../assets/images/z1.png) no-repeat;
			background-size: 26px;
		}
		i.two{
			background:url(./../assets/images/z2.png) no-repeat;
			background-size: 26px;
		}
		i.three{
			background:url(./../assets/images/z3.png) no-repeat;
			background-size: 26px;
		}
		.today{
			font-size: 12px;
			color:#7d85a1;
		}
		.price{
			color:#b0afaf;
			font-size: 12px;
		}
		.gain{
			span{
				display: inline-block;
				width: 70px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				font-size: 14px;
				border-radius: 2px;
			}
		}
	}
	/deep/.weui-cells:after{
		border-bottom:0;
	}
</style>